<template>
  <div class="wrap" id="editWorkflow" style="height: 100vh">
    <div class="main-box bindData-content">
      <div class="main-lf">
        <div class="workflow-tab flex_auto node-template">
          <el-scrollbar wrap-style="height: 100%;">
            <div class="nodes-wrap">
              <div
                v-for="(item, index) in nodeTypeList"
                :key="index"
                class="node"
                draggable="true"
                @dragstart="drag($event, item)"
              >
                <div class="span-ellipsis">
                  <span>{{ item.sourceTableEnName }}</span>
                  <span v-if="item.sourceTableCnName"
                    >（{{ item.sourceTableCnName }}）</span
                  >
                </div>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>

      <div class="main-rg">
        <!-- 添加辅助线 -->
        <div
          id="flowWrap"
          ref="flowWrap"
          class="flow-wrap"
          @drop="drop($event)"
          @dragover="allowDrop($event)"
        >
          <div id="flow" ref="flowRef">
            <div
              v-show="auxiliaryLine.isShowXLine"
              class="auxiliary-line-x"
              :style="{
                width: auxiliaryLinePos.width,
                top: auxiliaryLinePos.y + 'px',
                left: auxiliaryLinePos.offsetX + 'px',
              }"
            ></div>
            <div
              v-show="auxiliaryLine.isShowYLine"
              class="auxiliary-line-y"
              :style="{
                height: auxiliaryLinePos.height,
                left: auxiliaryLinePos.x + 'px',
                top: auxiliaryLinePos.offsetY + 'px',
              }"
            ></div>
            <flowNode
              v-for="item in data.nodeList"
              :id="item.id"
              :key="item.id"
              :node="item"
              @setNodeName="setNodeName"
              @deleteNode="deleteNode"
              @changeLineState="changeLineState"
            ></flowNode>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { jsPlumb } from "jsplumb";
import { nodeTypeList } from "./config/init";
import {
  jsplumbSetting,
  jsplumbConnectOptions,
  jsplumbSourceOptions,
  jsplumbTargetOptions,
} from "./config/config";
import methods from "./config/methods";
import data from "./config/data.json";
import flowNode from "./components/node-item";

export default {
  name: "tableInput",
  components: { flowNode },
  data() {
    return {
      jsPlumb: null,
      currentItem: null,
      nodeTypeList,
      data: {
        nodeList: [],
        lineList: [],
      },
      selectedList: [],
      jsplumbSetting,
      jsplumbConnectOptions,
      jsplumbSourceOptions,
      jsplumbTargetOptions,
      auxiliaryLine: { isShowXLine: false, isShowYLine: false }, //对齐辅助线是否显示
      auxiliaryLinePos: {
        width: "100%",
        height: "100%",
        offsetX: 0,
        offsetY: 0,
        x: 20,
        y: 20,
      },
      commonGrid: [5, 5], //节点移动最小距离
    };
  },
  created() {
    this.jsPlumb = jsPlumb.getInstance();
    this.initNode();
    this.fixNodesPosition();
    this.$nextTick(() => {
      this.init();
    });
  },
  methods: {
    ...methods,
    initNode() {
      // this.data.lineList = data.lineList;
      this.data.lineList = [];
      // this.data.nodeList = data.nodeList;
      this.data.nodeList = [];
    },
  },
};
</script>
<style lang="less" scoped>
.bindData-content {
  display: flex;
  height: 100vh;
  .main-lf {
    overflow: auto;
    .flex_auto {
      overflow: unset;
    }
  }
  .workflow-tab {
    .module-box {
      display: flex;
      flex-wrap: wrap;
      li {
        width: 33%;
        margin: 10px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        font-size: 12px;
        color: #666;
        cursor: pointer;
        img {
          max-width: 46px;
        }
      }
    }
  }

  .main-rg {
    width: 79%;
    overflow: hidden;
    background: #fff;
    .mining-tab-box {
      border-bottom: 1px solid #ebebeb;
      .canvas-box {
        width: 100%;
        height: 100%;
      }
      .iconfont {
        color: #666 !important;
      }
    }
  }
}
.bindData-content .my-tree {
  height: calc(100vh - 320px);
  margin-bottom: 10px;
  overflow: auto;
}

#editWorkflow /deep/ .table-header {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#editWorkflow {
  display: flex;
  width: 100%;
  height: 100%;
  .nodes-wrap {
    height: 100%;
    .node {
      display: flex;
      height: 40px;
      width: 90%;
      margin: 5px auto;
      border: 1px solid #ccc;
      line-height: 40px;
      &:hover {
        cursor: grab;
      }
      &:active {
        cursor: grabbing;
      }
      .log {
        width: 40px;
        height: 40px;
      }
      .name {
        width: 0;
        flex-grow: 1;
      }
    }
  }
  .el-select {
    width: 100% !important;
  }
}
.flow-wrap {
  height: 100%;
  position: relative;
  overflow: hidden;
  outline: none !important;
  flex-grow: 1;
  background-image: url("~@/assets/images/point.png");
  #flow {
    position: relative;
    width: 100%;
    height: 100%;
    .auxiliary-line-x {
      position: absolute;
      border: 0.5px dashed #2ab1e8;
      z-index: 9999;
    }
    .auxiliary-line-y {
      position: absolute;
      border: 0.5px dashed #2ab1e8;
      z-index: 9999;
    }
  }
}
.log-box {
  padding: 0px 15px 10px;
  line-height: 28px;
  .content {
    box-sizing: border-box;
  }
}

.mining-tab {
  padding: 4px 20px 0;
  display: flex;
  border-bottom: 1px solid #ebebeb;
  span {
    margin-right: 10%;
    color: #666;
    font-size: 14px;
    cursor: pointer;
    i {
      margin-right: 5px;
    }
    &:hover {
      color: #20a0ff;
    }
  }
}
</style>